<template>
    <div class="norm-form">
        <el-form ref="FormRef" :model="state.form" :rules="rules" label-width="auto" status-icon>
            <el-form-item label="名称" prop="name">
                <el-input v-model="state.form.name" clearable />
            </el-form-item>
            <el-form-item label="编码" prop="code">
                <el-input v-model="state.form.code" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">
                    保存
                </el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { ElNotification } from 'element-plus'
import { add } from '@/api/system/role'
import { useRouter } from 'vue-router'

const router = useRouter()
const FormRef = ref(undefined)

const state = reactive({
    form: {
        name: undefined,
        code: undefined,
    },

})


const rules = reactive({
    name: [
        { required: true, message: '名称必填', trigger: 'blur' },
        { min: 2, max: 50, message: '名称为2-50个字符', trigger: 'blur' },
    ],
    code: [
        { required: true, message: '编码必填', trigger: 'blur' },
        { min: 2, max: 50, message: '编码为2-50个字符', trigger: 'blur' },
    ],
})

const submitForm = async (formEl) => {
    if (!FormRef.value) return
    await FormRef.value.validate((valid, fields) => {
        if (valid) {
            add(state.form).then(data => {
                ElNotification({
                    title: '操作成功',
                    message: '角色新增成功',
                    type: 'success',
                })
                router.push('/role-list')
            })
        }
    })
}
const cancel = () => {
    router.push('/role-list')
}
</script>
<style scoped lang="scss"></style>
